<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt">
      <el-form
        ref="artFrom"
        :model="questionFrom"
        label-width="75px"
        inline
        :label-position="labelPosition"
        @submit.native.prevent
      >
        <el-form-item label="搜索：" label-for="nickname">
          <el-input
            v-model="questionFrom.keywords"
            placeholder="请输入搜索关键字"
            element-id="nickname"
            clearable
          >
            <el-select v-model="questionFrom.fieldKey" slot="prepend" style="width: 100px">
              <el-option value="id" label="id"></el-option>
              <el-option value="link_name" label="称呼"></el-option>
              <el-option value="link_mobile" label="联系电话"></el-option>
            </el-select>
          </el-input>
        </el-form-item>

        <el-form-item label="状态：">
          <el-select
            placeholder="请选择"
            clearable
            v-model="questionFrom.status"
            @change="userSearchs"
          >
            <el-option value="all" label="全部"></el-option>
            <el-option :value="0" label="未审核"></el-option>
            <el-option :value="1" label="已审核"></el-option>
            <el-option :value="2" label="被驳回"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市:" label-for="city_id">
          <el-select v-model="questionFrom.cityId" @change="CitySelect">
            <el-option value="all" label="全部"></el-option>
            <el-option
              :value="item.id"
              v-for="item in city_list"
              :key="item.id"
              :label="item.cityName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            label="default"
            class="mr15"
            @click="orderSearchs"
          >搜索</el-button>
          <el-button class="ResetSearch" @click="reset('questionFrom')">重置</el-button>
        </el-form-item>

        <el-table
          :data="applyList"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-row
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
        >
          <el-table-column label="Id" min-width="100" fixed="left">
            <template slot-scope="{row,index}">{{row.id}}</template>
          </el-table-column>
          <el-table-column label="意向城市" min-width="150">
            <template slot-scope="{row, index}">{{row.cityName}}</template>
          </el-table-column>
          <el-table-column label="职业技能" min-width="150">
            <template slot-scope="{row, index}">{{row.skill}}</template>
          </el-table-column>
          <el-table-column label="个人简介">
            <template slot-scope="{row, index}">{{row.shortDesc}}</template>
          </el-table-column>
          <el-table-column label="联系人">
            <template slot-scope="{row, index}">{{row.linkName}}</template>
          </el-table-column>
          <el-table-column label="联系人手机" min-width="120">
            <template slot-scope="{row, index}">{{row.linkMobile}}</template>
          </el-table-column>
          <el-table-column label="性别">
            <template slot-scope="{row,index}">{{row.sex == 1?'男':'女'}}</template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="{row, index}">
              <el-tag v-if="row.status == 0" type="info">待审核</el-tag>
              <el-tag v-if="row.status == 1" type="success">已通过</el-tag>
              <el-tag v-if="row.status == 2" type="error">已驳回</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" min-width="150">
            <template slot-scope="{row, index}">{{row.addTimeStr}}</template>
          </el-table-column>

          <el-table-column label="操作" fixed="right">
            <template slot-scope="{ row, index }">
              <a @click="examine (row)">{{row.status > 0 ?'详情':'审核'}}</a>
            </template>
          </el-table-column>
        </el-table>
        <div class="acea-row row-right page">
          <el-pagination
            :total="total"
            :current-page="questionFrom.page"
            @current-change="pageChange"
            :page-size="questionFrom.limit"
          />
        </div>
      </el-form>
    </el-card>
    <el-dialog
      :visible.sync="modals"
      title="人员申请详情"
      class="order_box"
      :closable="false"
      @close="close"
      width="600"
    >
      <staffApplyEdit ref="staffApplyEdit" v-if="modals" :id="table.id"></staffApplyEdit>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button v-if="table.status == 0" type="primary" @click="setApply(1)">通过</el-button>
        <el-button v-if="table.status == 0" type="danger" @click="setApply(2)">驳回</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="modals_reject"
      scrollable
      closable
      title="未通过原因"
      @close="close"
      :mask-closable="false"
    >
      <el-input v-model="fail_msg.message" type="textarea" :rows="4" placeholder="请输入未通过原因" />
      <div slot="footer">
        <el-button type="primary" size="large" long :loading="modal_loading" @click="reject">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import { mapState } from 'vuex';
import { formatDate } from '@/utils/validate';
import staffApplyEdit from './handle/apply.vue';
import { cityList, getStaffApplyListApi, saveStaffApplyApi } from '@/api/base';

export default {
  name: 'staffApply',
  components: {
    staffApplyEdit,
  },
  data() {
    return {
      modal_loading: false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modals_reject: false,
      isStatus: false,
      table: {
        id: 0,
        status: 0,
      },
      questionFrom: {
        keywords: '',
        fieldKey: 'link_name',
        status: 'all',
        cityId: 'all',
        page: 1,
        limit: 10,
      },
      city_list: [],
      applyList: [],
      applyData: {},
      loading: false,
      total: 0,
      fail_msg: {
        message: '',
      },
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : 75;
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
  },
  created() {
    // this.questionFrom.cate_id = this.$route.query.id ? this.$route.query.id : 0;
    // this.getCategory();
    this.getList();
    this.getCitys();
  },
  activated() {
    // this.questionFrom.cate_id = this.$route.query.id ? this.$route.query.id : 0;
    // this.getCategory();
    this.getList();
  },
  mounted() {},
  methods: {
    userSearchs() {
      this.getList();
    },
    getList() {
      this.loading = true;
      getStaffApplyListApi(this.questionFrom)
        .then(async (res) => {
          let data = res;
          let list = res.list;
          let count = res.total;
          this.total = count;
          this.applyList = list;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    pageChange(index) {
      this.questionFrom.page = index;
      this.getList();
    },

    // 表格搜索
    orderSearchs() {
      this.questionFrom.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.questionFrom = {
        keywords: '',
        field_key: 'link_name',
        status: 'all',
        page: 1,
        limit: 10,
        city_id: 'all',
      };
      this.getList();
    },
    // 审批
    examine(row) {
      this.table.id = row.id;
      this.table.status = row.status;
      this.modals = true;
    },

    // 审核提交
    setApply(status) {
      if (status == 1) {
        let data = this.$refs.staffApplyEdit.formItem;
        data.status = 1;
        data.id = this.table.id;
        saveStaffApplyApi(data)
          .then((res) => {
            this.$message.success('通过成功');
            this.close();
            this.getList();
          })
          .catch((err) => {
            this.$message.error('通过失败');
          });
      } else {
        this.modals_reject = true;
      }
    },
    reject() {
      this.modal_loading = true;
      let params = {
        status: 2,
        id: this.table.id,
        rejectReason: this.fail_msg.message,
      };
      saveStaffApplyApi(params)
        .then((res) => {
          this.close();
          this.$message.success('驳回成功');
          this.getList();
          this.modal_loading = false;
        })
        .catch((err) => {
          this.modal_loading = false;

          this.$message.error('驳回失败');
        });
    },
    close() {
      this.table = {
        id: 0,
        status: 0,
      };
      this.modals_reject = false;

      this.modals = false;
    },
    //获取城市列表
    getCitys() {
      cityList().then((res) => {
        let data = res;
        this.city_list = data.list;
      });
    },
    //选择城市
    CitySelect(e) {
      this.getList();
    },
  },
};
</script>
  
  <style scoped lang="stylus">
  .treeSel >>>.ivu-select-dropdown-list {
    padding: 0 10px !important;
    box-sizing: border-box;
  }

  .tabBox_img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
  